<template>
	<view class="top-black">
		<view class="tab-bar-pla" v-if="fixed">
			<!--状态栏高度-->
			<status-bar></status-bar>
			<view class="box-height"></view>
		</view>
		<view class="tab-bar">
			<view class="bg" :style="{'background-color':backgroundColor,'opacity':bgOpacity}"></view>
			<!--状态栏高度-->
			<status-bar></status-bar>
			<view class="line">
				<i-icon name="iconfont-icon-jiantou-copy" class="back-ioc" size="40rpx" :color="color" @click="goBack()" v-if="leftArrow"></i-icon>
				<u-icon name="home" class="home-ioc" size="48rpx" :color="color" @click="openHome()" v-if="homeShow"></u-icon>
				<slot name="left"></slot>
				<view class="line" v-if="title">
					<text class="title" :style="{'color':color}">{{title}}</text>
				</view>
				<view class="right">
					<slot name="right"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "top-bar",
		props: {
			title: {
				type: String,
				default: ""
			},
			homeShow: {
				type: Boolean,
				default: false
			},
			leftArrow: {
				type: Boolean,
				default: true
			},
			ScreenWhite: {
				type: Boolean,
				default: false
			},
			rightText: {
				type: String,
				default: ''
			},
			backgroundColor: {
				type: String,
				default: '#F1C01C'
			},
			color: {
				type: String,
				default: '#000000'
			},
			fixed: {
				type: Boolean,
				default: true
			},
			bgOpacity: {
				type: [String, Number],
				default: 1
			}
		},

		methods: {
			openHome() {
				uni.switchTab({
					url: "/pages/order/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-bar {
		position: fixed;
		left: 0px;
		top: 0px;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		z-index: 99;
		padding: 0 30rpx;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.line {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 88rpx;

			.back-ioc {
				position: absolute;
				left: 0;
			}

			.home-ioc {
				position: absolute;
				left: 66rpx;
			}

			.title {
				font-size: 36rpx;
				color: #333333;
			}

			.right {
				position: absolute;
				height: 88rpx;
				right: 0;
				display: flex;
				align-items: center;
			}
		}

	}

	.tab-bar-pla {
		display: flex;
		flex-direction: column;
		width: 750rpx;

		.box-height {
			width: 750rpx;
			height: calc(88rpx);
		}
	}
</style>
